<template>
	<!-- 在此组件中 制作一个对话框 -->
	<el-dialog title="新增用户" :visible.sync="dialogVisible" width="40%">
		<el-form ref="form" :rules="rules" label-width="80px" style="padding: 40px; ">
			<el-form-item label="账号" prop="account">
				<el-input v-model="form.account"></el-input>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="form.phone"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="gender">
			    <el-radio v-model="form.gender" label="男">男</el-radio>
			    <el-radio v-model="form.gender" label="女">女</el-radio>
			</el-form-item>
			<el-form-item  label="部门名称:" prop="dept">
				<el-select v-model="form.dept.id" placeholder="请选择部门" style="width: 100%;">
					<el-option :key="index" v-for="(dept,index) in depts" :label="dept.name" :value="dept.id"></el-option>
				</el-select>
			</el-form-item>
			 <el-form-item label="出生日期">
			    <el-col :span="11">
			      <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
			    </el-col>
			  </el-form-item>
			    <el-form-item  label="角色类型" prop="type">
			        <el-checkbox v-model="form.userroles" :key="index" v-for="(role,index) in roles" :label="role.id">{{role.name}}</el-checkbox>
			    </el-form-item>
			    
		</el-form>
		<p slot="footer" class="dialog-footer" style="width: 100%;text-align: center;">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="save()">确定</el-button>
		</p>
	</el-dialog>
</template>

<script>
	export default{
		name:"AddUser",
		data() {
			return {
				dialogVisible:false,
				roles:[],
				depts:[],
				form:{
					account:"",
					phone:"",
					birthday:'',
					gender:"",
					dept:{
						id:'',
						
					},
					userroles:[],
				},
					
				rules:{
					account: [
						{ required: true, message: '请输入账号', trigger: 'blur' },
						{ min: 3, max: 5, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					],
					dept: [
						{ required: true, message: '请选择部门', trigger: 'change' }
					],
					gender: [
						{ required: true, message: '请选择性别', trigger: 'change' }
					],
					type: [
						{ type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' }
					],
				}
			}
		},
		methods: {
			save(){
				this.$http.post("admin/userCtl/saveUser",this.form).then((resp)=>{
					if(resp.data.code == 200){
						this.$message({
							message: resp.data.message,
							type:'success'
						});
						this.dialogVisible=false;
						//location.reload();
						this.$router.go();
					}
					if(resp.data.code == 201){
						this.$message({
							message: resp.data.message,
							type:'warning'
						})
					}
					
				})
			},
		},
		mounted(){
			this.$http.get("admin/roleCtl/findRoles").then((resp)=>{
				this.roles = resp.data.data;
				
			})
			this.$http.get("admin/deptCtl/findDepts").then((resp)=>{
				console.log(resp.data);
				this.depts = resp.data.data;
			})
		}
			
	 } 
</script>

<style>
</style>
